<template>
  <div id="login">
    <el-card>
      <h2 style="margin: 10px 0px 40px 0px;">欢迎登录</h2>
      <el-form :label-position="labelPosition" label-width="50px" :model="formLabelAlign" v-model="labelPosition"
        @keyup.enter.native="login">

        <el-form-item label="账号">
          <el-input v-model="formLabelAlign.account" placeholder="请输入您的账号" maxlength="16"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input placeholder="请输入您的密码" v-model="formLabelAlign.password" show-password maxlength="16"></el-input>
        </el-form-item>

        <el-button @click="login" :plain="true">登录</el-button>

      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'login',
  data() {
    return {
      token: null, // 在这里存储登录成功后获取的token或session ID  
      userlist: [],
      labelPosition: 'left',
      formLabelAlign: {
        account: '',
        password: ''
      }
    }
  },
  methods: {
    login() {
      // 验证不能为空
      const { account, password } = this.formLabelAlign;
      if (!account || !password) {
        this.$message.error('请输入账号和密码！');
        return;
      }

      // 发起登录请求
      this.$axios.post("http://localhost:8888/users/login", {
        account: account,
        password: password
      })
        .then(response => {
          console.log(response);
          if (response.status == 200) {
            this.$message.success('登录成功！');

            localStorage.setItem('users', account); 

            setTimeout(() => {
              this.$router.push("/index");
            }, 3000);

          }
        })
        .catch(error => {
          console.log(error);
          this.$message.error('登录失败！请检查账号密码！');
        });
    }

  }
}
</script>

<style scoped>
* {
  font-weight: bold;
}

.custom-link {
  color: #409EFF;
  text-decoration: none;
}


#login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;

  background: linear-gradient(to right, #f2709c, #79CBCA, #E684AE);
  background-size: 200% auto;
  animation: gradientAnimation 10s ease infinite;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.el-card {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 380px;
  border-radius: 20px;
  width: 450px;
}

form {
  width: 380px;
}

button {
  width: 100px;
  margin: 10px 0px 30px 0px;
}

.el-tag {
  margin-left: 250px;
}
</style>
